/*
 * @Author: your name
 * @Date: 2020-07-23 19:35:02
 * @LastEditTime: 2020-09-21 13:40:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \PipeOneMap_WebClient\src\app\cityfun\mapbox-draw-tool\mapbox-draw-tool.component.ts
 */
import { EventEmitter, } from '@angular/core';
import { MapboxDrawService } from '../../core/services/mapbox-draw.service';
import { MapService } from '../../core';
import { Component, OnInit, Input, Output, OnDestroy } from '@angular/core';
import { CoreMessageService } from '../../core/services/core-message.service';


@Component({
  selector: 'app-mapbox-draw-tool',
  templateUrl: './mapbox-draw-tool.component.html',
  styleUrls: ['./mapbox-draw-tool.component.scss']
})
export class MapboxDrawToolComponent implements OnInit, OnDestroy {
  mapboxglmap = null;
  draw = null;
  @Output() drawEnd = new EventEmitter<any>();
  tmp = 0;
  data = [
    // {
    //   id: 'draw_line_string',
    //   title: '线选',
    //   dimg: './assets/img/toolbar/btn_sps_rect.png',
    //   simg: './assets/img/toolbar/line.png',
    // },
    // {
    //   id: 'draw_point',
    //   title: '点选',
    //   dimg: './assets/img/toolbar/btn_sps_rect.png',
    //   simg: './assets/img/toolbar/btn_sps_rect_select.png',
    // },
    {
      id: 'draw_rectangle',
      title: '框选',
      dimg: './assets/img/toolbar/btn_sps_rect.png',
      simg: './assets/img/toolbar/btn_sps_rect_select.png',
    },
    {
      id: 'drag_circle',
      title: '圆选',
      dimg: './assets/img/toolbar/btn_sps_circle.png',
      simg: './assets/img/toolbar/btn_sps_circle_select.png',
    },
    {
      id: 'draw_polygon',
      title: '多边',
      dimg: './assets/img/toolbar/btn_sps_plogon.png',
      simg: './assets/img/toolbar/btn_sps_plogon_select.png',
    },
    // {
    //   id: 'delete',
    //   title: '删除',
    //   dimg: './assets/img/toolbar/btn_sps_clear.png',
    //   simg: './assets/img/toolbar/btn_sps_clear_select.png',
    // }
  ];
  selectItem = '';
  constructor(private apboxMapService: MapService,
              private mapboxDrawService: MapboxDrawService,
              private coreMessageService: CoreMessageService) { }

  ngOnInit() {
    this.apboxMapService.init().then((mapboxglmap: any) => {
      this.mapboxglmap = mapboxglmap;
      if (mapboxglmap.isStyleLoaded()) {
        this.init(mapboxglmap);
      } else {
        mapboxglmap.on('load', () => {
          this.init(mapboxglmap);
        });
      }
    });

    // 接收其他组件的清空请求
    this.coreMessageService.cleardraw.subscribe(res => {
      this.selectItem = '';
      this.mapboxDrawService.reset(this.mapboxglmap);
    });
  }
  // TODO:首次绘制无法触发这个事件！
  init(map) {
    this.addListerDraw(map);
  }
  addListerDraw(map) {
    const self = this;
    map.on('draw.create', updateArea);
    map.on('draw.delete', updateArea);
    map.on('draw.update', updateArea);
    function updateArea(e) {
      self.submitData(e);
    }
  }
  submitData(e) {
    if (e.features) {
      // this.drawEnd.emit({feature: e});
      postal.channel('DRAW_TOOL_CHANNEL').publish('getGeo', e);
    } else {
      console.log('未进行绘制');
    }

  }
  drawClick(e) {
    // this.draw.deleteAll();
    this.mapboxDrawService.reset(this.mapboxglmap);
    this.draw = this.mapboxDrawService.getMapboxDraw();
    this.mapboxglmap.addControl(this.draw, 'top-right');
    // 点击项和当前选择项相同！
    if (this.selectItem === e.id) {
      // 清空当前选择项
      this.selectItem = null;
      // 清空绘制
      this.draw.deleteAll();
      // 回复给父组件的内容也置为空
      //  this.drawEnd.emit(null);
      postal.channel('DRAW_TOOL_CHANNEL').publish('getGeo', null);
      this.mapboxDrawService.reset(this.mapboxglmap);
    } else {
      this.selectItem = e.id;
      this.draw.changeMode(e.id);
      this.addListerDraw(this.mapboxglmap);
      // 绘制功能打开，i查询关闭
      postal.channel('IDENTIFY_CHANNEL').publish('close-identify');
    }
  }

  ngOnDestroy() {
    this.selectItem = null;
    this.mapboxDrawService.reset(this.mapboxglmap);
  }
}
